<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>涨跌统计</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="settings-panel">
            <div class="inline-form">
                <div class="form-item">
                    <label for="symbol">交易对</label>
                    <select id="symbol">
                        <option value="BTCUSDT">BTCUSDT</option>
                        <option value="ETHUSDT">ETHUSDT</option>
                    </select>
                </div>
                
                <div class="form-item">
                    <label>周期</label>
                    <select id="interval">
                        <option value="10m" selected>10分钟</option>
                        <option value="30m">30分钟</option>
                        <option value="1h">1小时</option>
                        <option value="1d">1天</option>
                    </select>
                </div>
                
                <div class="form-item">
                    <label>范围</label>
                    <select id="timeRange" class="time-select">
                        <option value="today" selected>今天</option>
                        <option value="yesterday">昨天</option>
                        <option value="1w">最近1周</option>
                        <option value="1m">最近1月</option>
                        <option value="3m">最近3月</option>
                        <option value="6m">最近6月</option>
                        <option value="1y">最近1年</option>
                        <option value="2y">最近2年</option>
                        <option value="3y">最近3年</option>
                        <option value="4y">最近4年</option>
                        <option value="5y">最近5年</option>
                        <option value="6y">最近6年</option>
                        <option value="7y">最近7年</option>
                    </select>
                </div>
                
                <button id="getData" class="btn">分析数据</button>
            </div>
        </div>
        
        <div id="loading" class="loading" style="display: none;">
            <div class="loading-progress">正在获取数据...</div>
        </div>
        
        <div id="results" style="display: none;">
            <div class="stats-card">
                <div class="time-range-header">
                    <div>时间范围: <span id="timeRangeInfo"></span></div>
                </div>
                
                <div class="statistics">
                    <div class="stat-item">
                        <div>总K线: <span id="totalCandles">97</span></div>
                    </div>
                    <div class="stat-item">
                        <div>上涨: <span id="upCandles">49 (50.52%)</span></div>
                    </div>
                    <div class="stat-item">
                        <div>下跌: <span id="downCandles">48 (49.48%)</span></div>
                    </div>
                    <div class="stat-item">
                        <div>平盘: <span id="flatCandles">0 (0.00%)</span></div>
                    </div>
                </div>
                
                <div class="continuous-data-section">
                    <div class="continuous-up-section">
                        <h4>连续上涨统计</h4>
                        <div class="stat-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>连续次数</th>
                                        <th>出现次数</th>
                                    </tr>
                                </thead>
                                <tbody id="upStatsTable">
                                    <!-- 统计数据将在这里显示 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="continuous-down-section">
                        <h4>连续下跌统计</h4>
                        <div class="stat-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>连续次数</th>
                                        <th>出现次数</th>
                                    </tr>
                                </thead>
                                <tbody id="downStatsTable">
                                    <!-- 统计数据将在这里显示 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- K线图显示区域 -->
        <div id="klineContainer" style="display: none;">
            <h3 id="kline-title">K线图表</h3>
            <div id="kline-chart" style="width: 100%; height: 400px;"></div>
        </div>
    </div>
    
    <script src="/assets/js/script.js"></script>
</body>
</html> 